<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">

    <title>学历分布</title>


    <link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="/static/css/entypo.css">
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/neon-core.css">
    <link rel="stylesheet" href="/static/css/neon-theme.css">
    <link rel="stylesheet" href="/static/css/neon-forms.css">
    <link rel="stylesheet" href="/static/css/custom.css">

    <script src="/static/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body class="page-body  page-left-in" data-url="http://neon.dev">

<div class="page-container">
    <!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

    <div class="sidebar-menu">


        <header class="logo-env">

            <!-- logo -->
            <div class="logo">
                    <h3 style="color: #fff;font-size: initial;font-weight: bold;margin-top: 5px ">大数据技术就业可视化系统</h3>

                </a>
            </div>

            <!-- logo collapse icon -->

            <div class="sidebar-collapse">
                <a href="#" class="sidebar-collapse-icon with-animation">
                    <!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
                    <i class="entypo-menu"></i>
                </a>
            </div>


        </header>


        <div class="sidebar-user-info">

            <div class="sui-normal">
                <a href="#" class="user-link">
                    <img style="width: 95%;border-radius: 50%" src="/media/{{ userInfo.avatar }}" width="120" alt="">
                    <span style="text-align: center;padding-top: 200px">欢迎回来</span>
                    <strong style="text-align: center;margin-top: 5px">{{ userInfo.username }}</strong>
                </a>
            </div>
        </div>


        <ul id="main-menu" class="">

            <li>
                <a href="/myApp/home">
                    <i class="entypo-gauge"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-user"></i>
                    <span>个人中心</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/selfInfo">
                            <span>个人信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/changePassword">
                            <span>修改密码</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-layout"></i>
                    <span>数据统计</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/tableData">
                            <span>数据总览</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/historyTableData">
                            <span>公司收藏</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="opened active">
                <a href="mailbox.html">
                    <i class="entypo-chart-bar"></i>
                    <span>可视化图表</span>
                </a>
                <ul>
                    <li>
                        <a href="/myApp/salary">
                            <i class="entypo-inbox"></i>
                            <span>薪资情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/company">
                            <i class="entypo-attach"></i>
                            <span>企业情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/companyTags">
                            <i class="entypo-thumbs-up"></i>
                            <span>福利词云</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="/myApp/educational">
                            <i class="entypo-book-open"></i>
                            <span>学历分布</span>
                        </a>
                    </li>
                    <li>
                        <a href="/myApp/companyStatus">
                            <i class="entypo-network"></i>
                            <span>企业融资</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="main-content">

        <div class="row" style="display: flex">
            <div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">

                <ul class="list-inline links-list pull-right">


                    <li class="sep"></li>

                    <li>
                        <a href="/myApp/logOut">
                            退出登录<i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
        <hr>
        <ol class="breadcrumb bc-3">
            <li>
                <a href="#"><i class="entypo-home"></i>可视化图表</a>
            </li>
            <li class="active">
                <strong>
                    学历分布
                </strong>

            </li>
        </ol>
        <h2>学历分布</h2>
        <br>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-info" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">选择学历要求</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form action="/myApp/educational" method="GET">
                            <div class="col-md-4">
                                <select name="educational" class="form-control">
                                    {% if defaultEducation == '学历不限' %}
                                        <option selected value="学历不限">学历不限</option>
                                    {% else %}
                                        <option value="学历不限">学历不限</option>
                                    {% endif %}
                                    {% for i in educations %}
                                        {% if i == defaultEducation %}
                                            <option selected value="{{ i }}">{{ i }}</option>
                                        {% else %}
                                            <option value="{{ i }}">{{ i }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-info">提交</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">工作年限薪涨幅度情况</div>
                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body" style="text-align: center">
                        {% if hasEmpty %}
                            <i class="entypo-cloud" style="font-size: 250px">
                                <h1>数据飘走咯~~（无数据！！！）</h1>
                            </i>
                        {% else %}
                            <div id="main" style="width: 100%;height: 480px"></div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <div class="panel-heading">
                        <div class="panel-title">学历人数</div>
                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i
                                    class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>
                    <div class="panel-body" style="text-align: center">
                        <div id="mainTwo" style="width: 100%;height: 480px"></div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="main">


            基于大数据技术的就业可视化系统设计与实现

        </footer>
    </div>


    <link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="/static/css/rickshaw.min.css">
    <link rel="stylesheet" href="/static/css/datatables.responsive.css">
    <link rel="stylesheet" href="/static/css/select2-bootstrap.css">
    <link rel="stylesheet" href="/static/css/select2.css">
    <!-- Bottom Scripts -->
    <script src="/static/js/main-gsap.js"></script>
    <script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <script src="/static/js/joinable.js"></script>
    <script src="/static/js/resizeable.js"></script>
    <script src="/static/js/neon-api.js"></script>
    <script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
    <script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
    <script src="/static/js/jquery.sparkline.min.js"></script>
    <script src="/static/js/d3.v3.js"></script>
    <script src="/static/js/rickshaw.min.js"></script>
    <script src="/static/js/neon-chat.js"></script>
    <script src="/static/js/neon-custom.js"></script>
    <script src="/static/js/neon-demo.js"></script>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/jquery.dataTables.min.js"></script>
    <script src="/static/js/TableTools.min.js"></script>
    <script src="/static/js/dataTables.bootstrap.js"></script>
    <script src="/static/js/jquery.dataTables.columnFilter.js"></script>
    <script src="/static/js/lodash.min.js"></script>
    <script src="/static/js/datatables.responsive.js"></script>
    <script src="/static/js/fileinput.js"></script>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        const colors = ['#5470C6', '#91CC75'];
        option = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true},

                }
            },
            legend: {
                data: ['薪资平均值', '人数']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    // prettier-ignore
                    data: {{ workExperiences | safe }}
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '薪资平均值',
                    position: 'right',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ￥'
                    },
                    splitLine: {show: false}
                },
                {
                    type: 'value',
                    name: '人数',
                    position: 'left',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],

            series: [
                {
                    name: '薪资平均值',
                    type: 'bar',
                    data: {{ charDataColumnOne }}
                },
                {
                    name: '人数',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: {{ charDataColumnTwo }}
                }
            ]
        };

        option && myChart.setOption(option);

    </script>
    <script>
        var chartDom = document.getElementById('mainTwo');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            color: 'black',
            title: {
                text: '学历人数柱状图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true},

                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: {{ barDataRow | safe }}
            },
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    data: {{ barDataColumn }},
                    markPoint: {
                        data: [
                            {type: 'max', name: 'Max'},
                            {type: 'min', name: 'Min'}
                        ]
                    },
                    markLine: {
                        data: [{type: 'average', name: 'AVG'}]
                    },
                    itemStyle: {
                        normal: {
                            color: (param) => {
                                var colorList = [
                                    '#c23531',
                                    '#2f4554',
                                    '#61a0a8',
                                    '#d48265',
                                    '#91c7ae',
                                    '#749f83',
                                    '#ca8622'
                                ];
                                return colorList[Math.floor(Math.random() * colorList.length)];
                            }
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);

    </script>
</div>
</body>
</html>
